﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>无标题页</title>

<style type="text/css">
    #dlgbg { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; filter: alpha(opacity=40); text-align: center; }
    #dlg { position: absolute; width: 400px; height: 300px; top: 200px; left: 300px; background: #fff; z-index: 900; display: none; }
    #dlgtitlebar { }
</style>

</head>

<body style="background: #FFF;">
<div style="width: 1000px; text-align: center;">
    <span onclick="showdlg('dlg');">显示</span>
    <div style="margin-top: 300px;">
        大栅栏简大狮
    </div>
</div>
<div id="dlg">
    <div class="dlgtitlebar">
        <span class="dlgtitle">对话框</span><span class="dlgclosebutton">关闭</span>
    </div>
</div>
<div id="dlgbg">
</div>
<script type="text/javascript">    
    function showdlg(id){
        var d = document.getElementById('dlg');        
        var l = (document.body.clientWidth - 400)/2 ;
        var t = 200;
        d.style.left = l;
        d.style.top = t;
        document.getElementById('dlgbg').style.display ="block";
        d.style.display="block";
    }
    
</script>
</body>
</html>
